<template>

  <div style="padding-bottom: 2%">

    <a-comment v-for="comment in comments" :key="comment.commentId">
      <a-avatar
        slot="avatar"
        src="/user.svg"
      />
      <a slot="author" style="color: #6d757a;    font-size: 12px; font-weight: bold;line-height: 18px;padding-bottom: 4px;padding-right: 10px;word-wrap: break-word;">
        {{ comment.commentator }} </a>
      <span v-if="comment.email" slot="author">邮箱:{{ comment.email }}  </span>
      <span v-if="comment.websiteUrl" slot="author">主页：{{ comment.websiteUrl }}  </span>

      <p slot="content">
        {{ comment.commentBody }}
      </p>
      <p>
        <a-tooltip slot="datetime">
          <a-tooltip placement="left" :title="comment.createTime" :get-popup-container="getPopupContainer">
            <span style="padding-right: 2%;">{{
              comment.createTime_fast
            }}</span>
          </a-tooltip>

        </a-tooltip>
        <span key="comment-basic-like">
          <a-tooltip title="Like">
            <a-icon type="like" :theme="action === 'liked' ? 'filled' : 'outlined'" @click="like"/>
          </a-tooltip>
          <span style="padding-left: '8px';cursor: 'auto'">
            {{ likes }}
          </span>
        </span>
        <span key="comment-basic-dislike">
          <a-tooltip title="Dislike">
            <a-icon
              type="dislike"
              :theme="action === 'disliked' ? 'filled' : 'outlined'"
              @click="dislike"
            />
          </a-tooltip>
          <span style="padding-left: '8px';cursor: 'auto'">
            {{ dislikes }}
          </span>
        </span>
        <a key="comment-basic-reply-to" @click="toggleReply(comment)">回复</a>
        <template v-if="hasPerm('blogComment:delete')">
          <a-popconfirm title="确定删除吗？" ok-text="确定" cancel-text="取消" @confirm="del(comment)">
            <a style="padding-left: 1%">删除</a>
          </a-popconfirm>
        </template>
        <strong style="margin-left: 5px;">审核</strong>
        <a-switch
          style="margin-left: 5px;"
          :checked="comment.commentStatus === 1"
          @click="() => commentStatusToggle(comment)">
          <a-icon slot="checkedChildren" type="check"/>
          <a-icon slot="unCheckedChildren" type="close"/>
        </a-switch>
        <reply
          v-show="comment.isShowReply"
          @parentFun="parentFun"
          :content="content"
          :commentator="comment.commentator"></reply>
      </p>

    </a-comment>
    <span v-if="isShowTotal">共{{ total }}条回复，<a @click="look(lookBoolean)">{{ lookText }}</a></span>
    <a-divider/>
  </div>

</template>
<script>
import reply from '@/views/main/bloginfo/reply'
import blogComment from '@/views/main/bloginfo/blogComment'
import { blogCommentDelete, blogCommentPage, commentStatusToggle } from '@/api/modular/main/blogcomment/blogCommentManage'
import { getTimer } from '@/utils/util'

export default {
  components: {
    reply,
    blogComment
  },
  data() {
    return {
      likes: 0,
      dislikes: 0,
      action: null,
      isShowReply: false,
      comments: [],
      total: 0,
      isShowTotal: false,
      lookBoolean: true,
      lookText: '点击查看'
    }
  },
  mounted() {
    this.getCommentPage(1)
  },
  props: [
    'content'
  ],
  methods: {
    like() {
      this.likes = 1
      this.dislikes = 0
      this.action = '定'
    },
    dislike() {
      this.likes = 0
      this.dislikes = 1
      this.action = '踩'
    },
    toggleReply(e) {
      const nowStatu = e.isShowReply
      e.isShowReply = !nowStatu
    },
    look(lookBoolean) {
      if (lookBoolean) {
        this.lookText = '点击收起'
        this.lookBoolean = !this.lookBoolean
        this.getCommentPage(this.total)
      } else {
        this.lookText = '点击查看'
        this.lookBoolean = !this.lookBoolean
        this.getCommentPage(1)
      }
    },
    getCommentPage(pageSize) {
      blogCommentPage({ pageNo: 1, pageSize: pageSize, parentId: this.content.parentId }).then((res) => {
        for (let i = 0; i < res.data.rows.length; i++) {
          res.data.rows[i].createTime_fast = getTimer(res.data.rows[i].createTime)
        }
        this.comments = res.data.rows
        this.total = res.data.totalRows
        if (this.total > 1) {
          this.isShowTotal = true
        }
        if (pageSize > 1) {
          this.isShowTotal = true
          this.lookText = '点击收起'
        }
        this.comments = this.comments.map(item => {
          this.$set(item, 'isShowReply', false)
          return item
        })
      })
    },
    del(comment) {
      blogCommentDelete(comment).then((res) => {
        if (res.code === 200 & res.success === true) {
          this.$message.success('删除成功！')
          this.parentFun()
        }
      })
    },
    parentFun() {
      this.$emit('parentFun')
    },
    commentStatusToggle(data) {
      commentStatusToggle(data).then((res) => {
          if (res.success) {
            this.$message.success('切换成功!')
            this.parentFun()
          } else {
            this.$message.error('切换失败,' + res.message) //
          }
        }
      )
    }
  }
}
</script>
